<template>
  <div class="content bonus_two">
    <div class="tabs_box" :class="{ tab_width: boardTabsData.length == 1 }">
      <van-tabs
        @click="onTabsClick"
        color="#d80a06"
        line-width="15"
        line-height="2"
        class="cont-tab"
        border
        swipeable
        title-active-color="#d80a06"
        title-inactive-color="#333333"
        v-model="tabsActive"
        v-if="boardTabsData.length > 1">
        <van-tab
          v-for="item in boardTabsData"
          :key="item.id"
          :title="item.label"
          title-class="my_tab"
          :name="item.id"></van-tab>
      </van-tabs>
    </div>
    <!-- 时间切换 -->
    <div class="switch_title">
      <div class="bonus_left_total">
        <van-tabs
          v-model="selectData.status"
          :swipe-threshold="3"
          @change="tabChoose"
          background="transparent"
          color="#3863a3"
          title-active-color="#3863a3"
          :swipeable="true">
          <van-tab
            v-for="item in totalStatic"
            :key="item.typeCode"
            :name="item.typeCode"
            :title="item.typeName + item.typeCount"></van-tab>
        </van-tabs>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item
          @change="quarterChange"
          title-class="time_title"
          v-model="selectData.quartYM"
          :options="yearQuater" />
      </van-dropdown-menu>
    </div>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getPCApplyList"
      :offset="300"
      :immediate-check="false">
      <div class="list_con_main" v-if="ExtraParmas.length">
        <div v-for="(item, index) in ExtraParmas" :key="index" @click="goDetail(item)" class="bonus-con">
          <div class="bonus_one">
            <div class="list_con_text" v-html="removeHtmlStyle(item.boundsName)"></div>
            <div class="spot_list_type">{{ enmuData(item.status) }}</div>
          </div>
          <div class="bonus_one_org">
            <!-- <span class="iconfont icontouxiang6"></span> -->
            <span class="oragn_name">{{ item.orgName }}</span>
            <span class="username">{{ item.userName }}</span>
          </div>
          <div class="spot_list_tip">
            <div class="list_tip">{{ item.boundsTypeName }}</div>
            <div class="time">{{ item.time }}</div>
          </div>
        </div>
      </div>
      <van-empty v-if="ExtraParmas.length == 0" description="暂无数据" />
    </van-list>
  </div>
</template>

<script>
import { listBonusConfirm, selectYearAndQuarter, getBonusConfirmListCount } from '@api/api-bonus.js'
export default {
  components: {},
  props: {
    // 1申报、2审核、3考核办
    bonusType: {
      type: String,
      default: '1',
    },
  },
  data() {
    const date = new Date()
    return {
      userInfo: JSON.parse(localStorage.userInfo),
      tabsActive: '1',
      statusOption: [
        { value: '5', text: '全部' },
        { value: '1', text: '通过' },
        { value: '0', text: '不通过' },
      ],
      stateList2: [
        { id: '5', name: '全部' },
        { id: '1', name: '通过' },
        { id: '0', name: '不通过' },
      ],
      quarterActive: '1',
      yearQuater: [],
      ExtraParmas: [],
      selectData: {
        status: '5',
        quartz: Math.floor((date.getMonth() + 1) % 3 === 0 ? (date.getMonth() + 1) / 3 : (date.getMonth() + 1) / 3 + 1),
        year: date.getFullYear().toString(),
        quartYM: '',
        currentPage: 1,
        pageSize: 10,
        noticListTotal: 0,
      },
      loading: false,
      finished: false,
      totalStatic: [
        {
          typeCode: '5',
          typeName: '总计',
          typeCount: 0,
        },
        {
          typeCode: '1',
          typeName: '通过',
          typeCount: 0,
        },
        {
          typeCode: '0',
          typeName: '不通过',
          typeCount: 0,
        },
      ],
      boardTabsData: [
        { label: '加分项审定', id: '1' },
        { label: '减分项审定', id: '2' },
      ],
    }
  },
  created() {
    this.dealAudit()
    this.selectYearAndQuarter()
  },
  mounted() {},
  methods: {
    dealAudit() {
      if (this.$store.state.bonusTabIndex.substring(0, 8) === 'bonusTwo') {
        this.tabsActive = this.$store.state.bonusTabIndex.substring(8)
      }
    },
    enmuData(code) {
      if (code) {
        const nameArr = this.stateList2.filter(item => {
          return item.id === code
        })
        if (nameArr.length > 0) {
          return nameArr[0].name
        } else {
          return '--'
        }
      }
    },
    removeHtmlStyle(html) {
      const rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    // 获取年度和季度
    selectYearAndQuarter() {
      selectYearAndQuarter({
        id: '1',
      }).then(res => {
        if (res.status === 200) {
          const listQuater = res.data
          if (listQuater.length > 0) {
            for (const i in listQuater) {
              const year = listQuater[i].year
              for (const j in listQuater[i].list) {
                let quater = '第一季度'
                if (listQuater[i].list[j].quarter === 1) {
                  quater = '第一季度'
                } else if (listQuater[i].list[j].quarter === 2) {
                  quater = '第二季度'
                } else if (listQuater[i].list[j].quarter === 3) {
                  quater = '第三季度'
                } else if (listQuater[i].list[j].quarter === 4) {
                  quater = '第四季度'
                }
                this.yearQuater.push({
                  value: `${year}${listQuater[i].list[j].quarter}`,
                  text: `${year}年${quater}`,
                  isChoose: listQuater[i].list[j].isChoose,
                })
              }
            }
            const arr = this.yearQuater.filter(item => {
              return item.isChoose
            })
            this.selectData.quartYM = arr[0].value
          }
          this.quarterChange()
        }
      })
    },

    getListBonusConfirmListCount() {
      getBonusConfirmListCount({
        inPutType: this.tabsActive,
        orgId: '',
        quartz: this.selectData.quartz,
        year: this.selectData.year,
        pageNum: 0,
        pageSize: 0,
        listType: '2',
        status: this.selectData.status,
      }).then(res => {
        this.totalStatic[0].typeCount = res.data.total || 0
        this.totalStatic[1].typeCount = res.data.passCount || 0
        this.totalStatic[2].typeCount = res.data.notPassCount || 0
        // this.getPCApplyList()
      })
    },

    getPCApplyList() {
      // 获取已申报列表
      this.loading = true
      this.finished = false
      listBonusConfirm({
        pageNum: this.selectData.currentPage,
        pageSize: this.selectData.pageSize,
        status: this.selectData.status,
        quartz: this.selectData.quartz,
        year: this.selectData.year,
        inPutType: this.tabsActive,
        orgId: '',
      })
        .then(res => {
          if (res.status === 200) {
            this.ExtraParmas.push(...res.data.content)
            this.selectData.noticListTotal = res.data.totalSize
            this.selectData.currentPage++
            this.loading = false
            // console.log(this.ExtraParmas.length, this.selectData.noticListTotal)
            if (this.ExtraParmas.length === this.selectData.noticListTotal) {
              this.finished = true
            }
          }
        })
        .catch(err => {
          console.log(err)
          this.loading = false
          this.finished = true
        })
    },
    tabChoose(type) {
      this.selectData.status = type
      this.selectData.currentPage = 1
      this.selectData.pageSize = 10
      this.ExtraParmas = []
      this.getPCApplyList()
    },
    quarterChange() {
      this.selectData.currentPage = 1
      this.selectData.pageSize = 10
      this.ExtraParmas = []
      this.selectData.quartz = this.selectData.quartYM.substring(4)
      this.selectData.year = this.selectData.quartYM.substring(0, 4)
      this.getPCApplyList()
      this.getListBonusConfirmListCount()
    },
    goDetail(item) {
      const type = item.status === '1' ? '2' : '1'
      this.$router.push({
        path: '/bonusDetail',
        query: {
          id: item.id,
          applyType: this.tabsActive,
          type: type,
        },
      })
    },
    onTabsClick(name, title) {
      this.selectData.currentPage = 1
      this.selectData.pageSize = 10
      this.ExtraParmas = []
      this.quarterChange()
      this.$store.state.bonusTabIndex = 'bonusTwo' + this.tabsActive
    },
  },
}
</script>

<style lang="scss" scoped>
.bonus_two {
  background-color: #f5f5f5;
  height: 100%;

  .cont-tab {
    height: 100%;
    /deep/.van-tabs__wrap {
      height: 40px;
      background: #fff;
      border-bottom: 1px solid #efefef;
      .van-tab__text {
        line-height: 40px;
        font-size: 14px;
      }
      .van-tabs__nav {
        width: 100%;
      }
    }
  }
}
.content {
  padding-bottom: 50px;
  .tab_width {
    width: 50%;
  }
  // 时间切换
  .switch_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 6px;
    background-color: #f4f6f8;
    position: relative;
    background-color: #ffffff;
    /deep/.van-dropdown-menu {
      width: 140px;
      margin-right: 10px;
      text-align: right;
      .van-dropdown-menu__bar {
        height: 36px;
        background-color: transparent;
        box-shadow: none;

        .time_title {
          color: #333333;
          font-size: 14px !important;
        }
      }
      .van-popup--top {
        position: absolute;
      }
      .van-dropdown-item {
        position: absolute;
        top: 36px !important;
        height: 100vh;
        width: 100%;
        .van-dropdown-item__content {
          max-height: 50%;
        }
      }
      .van-dropdown-menu__item {
        justify-content: flex-end;
      }
    }

    .bonus_left_total {
      flex: 1;
      width: 0;
      cursor: pointer;
      height: 100%;
      /deep/ .van-tabs--line {
        height: 100%;
        .van-tabs__wrap {
          height: 100%;
          .van-tabs__nav--line {
            padding-bottom: 0;
            .van-tab {
              height: 100%;
              @include center;
            }
          }
          .van-tab--active {
            .van-tab__text {
              color: #004db6;
            }
          }
        }
        .van-tabs__line {
          display: none;
        }
      }
    }
  }
  .van-list {
    background-color: #f5f5f5;
  }
  .list_con_main {
    .bonus-con {
      margin: 8px 16px;
      background: #ffffff;
      border-radius: 5px;
      padding: 13px;
    }
    .bonus_one_org {
      .oragn_name {
        margin-right: 5px;
      }
      .username {
        margin-right: 5px;
      }
    }
    .bonus_one {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 25px;
      margin-bottom: 5px;
    }
    .list_con_text {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .spot_list_type {
      border-radius: 2px;
      color: #004db6;
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 70px;
    }
    .spot_list_tip {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 5px;
      .list_tip {
        background: #f9f1e8;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        padding: 5px;
        color: #a57d60;
      }
    }
  }
}
</style>
